<template>
  <view class="container">
    <!-- 头部信息 -->
    <view class="header-info">
      <view class="avatar">
        <image src="https://via.placeholder.com/80x80" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <view class="name">葛毅</view>
        <view class="intro">个人介绍</view>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stat-info">
      <view class="stat-item">
        <text class="stat-num">3-5年</text>
        <text class="stat-desc">从业</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">72</text>
        <text class="stat-desc">服务人数</text>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="detail-info">
      <view class="info-item">
        <text class="label">公司名称：</text>
        <text class="value">xx公司</text>
      </view>
      <view class="info-item">
        <text class="label">所属门店：</text>
        <text class="value">xx xx门店</text>
      </view>
      <view class="info-item">
        <text class="label">主营小区：</text>
        <text class="value">xx xx门店</text>
      </view>
    </view>

    <!-- 房源列表 -->
    <view class="house-list">
      <view class="house-title">
        <text>TA的房源 (42)</text>
      </view>
      <view class="house-item" v-for="(item, index) in houseList" :key="index">
        <view class="house-thumb">
          <image src="https://via.placeholder.com/120x100" mode="aspectFill"></image>
        </view>
        <view class="house-content">
          <view class="house-tags">
            <text class="tag">大户型</text>
            <text class="tag">房东急售！送车位</text>
          </view>
          <view class="house-desc">
            <text>大户型！精装修，价格可...</text>
            <text>3室2厅 128m 阳光城檀府</text>
          </view>
          <view class="house-price">
            <text class="price-num">90万</text>
            <text class="price-unit">8000元/m</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      houseList: [
        {
          thumb: '',
          tags: ['大户型', '房东急售！送车位'],
          desc: '大户型！精装修，价格可...\n3室2厅 128m 阳光城檀府',
          price: '90万',
          unit: '8000元/m'
        },
        {
          thumb: '',
          tags: ['大户型', '房东急售！送车位'],
          desc: '大户型！精装修，价格可...\n3室2厅 128m 阳光城檀府',
          price: '90万',
          unit: '8000元/m'
        }
      ]
    };
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.header-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
}

.intro {
  color: #666;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.stat-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-size: 32rpx;
  font-weight: bold;
}

.stat-desc {
  color: #666;
  font-size: 28rpx;
  margin-top: 5rpx;
}

.detail-info {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.info-item {
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
}

.label {
  color: #666;
  width: 120rpx;
}

.value {
  flex: 1;
  color: #333;
}

.house-list {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.house-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.house-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.house-thumb {
  width: 120rpx;
  height: 100rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.house-thumb image {
  width: 100%;
  height: 100%;
}

.house-content {
  flex: 1;
}

.house-tags {
  margin-bottom: 10rpx;
}

.tag {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  font-size: 26rpx;
}

.house-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.house-price {
  display: flex;
  align-items: center;
}

.price-num {
  font-size: 32rpx;
  font-weight: bold;
  color: #f30;
  margin-right: 20rpx;
}

.price-unit {
  color: #666;
  font-size: 28rpx;
}
</style>